<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav
      class="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-50 via-white to-pink-50 shadow-sm z-50"
    >
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center">
            <div class="text-2xl font-serif text-purple-900">丝韵NFT</div>
          </div>
          <div class="hidden md:flex items-center space-x-8">
            <a href="#" class="text-gray-700 hover:text-purple-900">首页</a>
            <a href="#" class="text-gray-700 hover:text-purple-900">商品分类</a>
            <a href="#" class="text-gray-700 hover:text-purple-900">艺术家</a>
            <a href="#" @click="goToTracePage" class="text-gray-700 hover:text-purple-900">溯源查询</a>
            <div class="relative">
              <input
                type="text"
                class="w-48 py-2 pl-10 pr-4 text-sm text-gray-700 bg-gray-100 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-purple-500"
                placeholder="搜索丝绸艺术品..."
                v-model="searchQuery"
              />
              <i
                class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
              ></i>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <i class="el-icon-user-solid"></i>
            <i class="el-icon-shopping-cart-2"></i>
          </div>
        </div>
      </div>
    </nav>
    <!-- 商品列表 -->
    <section class="py-16 bg-gradient-to-r from-purple-100/30 to-pink-100/30">
      <div class="max-w-7xl mx-auto px-4 py-8">
        <!-- 商品展示区域 -->
        <div class="grid grid-cols-3 gap-12 mb-12">
          <!-- 左侧商品图片 -->
          <div
            class="relative group col-span-1 cursor-pointer"
            @click="show3DModel = true"
          >
            <img
              :src="'https://public.readdy.ai/ai/img_res/4d678caf6a88fe7213a977d7014a6b29.jpg'"
              class="w-full h-full object-cover rounded-lg shadow-lg"
              alt="丝绸商品图片"
            />
            <div
              class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 rounded-lg flex items-center justify-center"
            >
              <i
                class="fas fa-cube text-white text-3xl opacity-0 group-hover:opacity-100 transition-all duration-300"
              ></i>
            </div>
          </div>

          <!-- 右侧商品信息 -->
          <div class="space-y-6 col-span-2">
            <h1 class="text-3xl font-bold">江南雅韵·千丝万缕数字艺术收藏品</h1>
            <div class="flex items-baseline space-x-4">
              <span class="text-4xl font-bold text-indigo-600">￥28,888</span>
              <span class="text-gray-500">限量发行 100 份</span>
            </div>

            <div class="grid grid-cols-2 gap-6">
              <div class="space-y-4 text-gray-700">
                <div class="flex items-center space-x-2">
                  <i class="fas fa-certificate text-indigo-600"></i>
                  <span>材质：100% 天然桑蚕丝</span>
                </div>
                <div class="flex items-center space-x-2">
                  <i class="fas fa-ruler text-indigo-600"></i>
                  <span>尺寸：180cm × 90cm</span>
                </div>
                <div class="flex items-center space-x-2">
                  <i class="fas fa-palette text-indigo-600"></i>
                  <span>工艺：苏绣 + 数字化重构</span>
                </div>
              </div>

              <div class="space-y-4 text-gray-700">
                <div class="flex items-center space-x-2">
                  <i class="fas fa-map-marker-alt text-indigo-600"></i>
                  <span>产地：江苏省苏州市</span>
                </div>
                <div class="flex items-center space-x-2">
                  <i class="fas fa-calendar-alt text-indigo-600"></i>
                  <span>生产日期：2025-01-15</span>
                </div>
                <div class="flex items-center space-x-2">
                  <i class="fas fa-qrcode text-indigo-600"></i>
                  <span>批次号：SZ20250115001</span>
                </div>
              </div>
            </div>

            <button
              class="w-1/3 py-4 bg-indigo-600 text-white text-lg font-semibold rounded-lg hover:bg-indigo-700 transition-colors duration-300 !rounded-button whitespace-nowrap"
            >
              立即购买
            </button>
          </div>
        </div>
        <!-- 商品故事 -->

        <div class="bg-gray-50 rounded-xl p-8 mb-12">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold">商品故事信息</h2>
            <button
              class="text-indigo-600 button-border"
              @click="expandTrace = !expandTrace"
            >
              <i
                :class="[
                  'fas',
                  expandTrace ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                ]"
              ></i>
            </button>
          </div>

          <!-- <div v-show="expandTrace" class="grid grid-cols-3 gap-8">
          <div class="space-y-4">
            <h3 class="font-semibold text-lg mb-4">生产信息</h3>
            <div class="space-y-2">
              <p>生产地：江苏省苏州市</p>
              <p>生产日期：2025-01-15</p>
              <p>批次号：SZ20250115001</p>
            </div>
          </div>

          <div class="space-y-4">
            <h3 class="font-semibold text-lg mb-4">质检认证</h3>
            <div class="space-y-2">
              <p>质检机构：国家丝绸质量监督检验中心</p>
              <p>检验日期：2025-01-20</p>
              <p>证书编号：NSTC2025011586</p>
            </div>
          </div>

          <div class="space-y-4">
            <h3 class="font-semibold text-lg mb-4">区块链信息</h3>
            <div class="space-y-2">
              <p class="flex items-center">
                合约地址：
                <span class="text-sm text-gray-500 ml-2">0x7d5f...8e9f</span>
                <i
                  class="fas fa-copy ml-2 cursor-pointer text-indigo-600"
                  @click="copyText('0x7d5f...8e9f')"
                ></i>
              </p>
              <p>铸造时间：2025-02-01 14:30</p>
              <p>Token ID：#0086</p>
            </div>
          </div>
        </div> -->
          <div class="grid grid-cols-2 gap-12 mb-12">
            <div class="relative group col-span-1 cursor-pointer">
              <img
                :src="'https://public.readdy.ai/ai/img_res/4d678caf6a88fe7213a977d7014a6b29.jpg'"
                class="w-1/3 h-full object-cover rounded-lg shadow-lg"
                alt="丝绸商品图片"
              />
            </div>
            <div class="relative group col-span-1 cursor-pointer">
              灵感之源：邂逅自然之美 故事始于一场神秘而浪漫的森林探险。设计师
              [设计师名字]
              深入那片被岁月遗忘的古老森林，阳光透过枝叶的缝隙洒下，形成一片片斑斓的光影。脚下是柔软的苔藓，空气中弥漫着花草的芬芳。一只色彩斑斓的蝴蝶轻盈地飞过，它翅膀上的花纹如同精心绘制的画卷，瞬间击中了设计师的灵感神经。那细腻的色彩过渡，灵动的线条组合，仿佛是大自然赋予的珍贵礼物。于是，[丝巾名称]
              的设计雏形在这片充满生机的森林中悄然诞生。
              匠心织造：传统与现代的交融
              回到工坊，设计师带着这份对自然的敬畏与热爱，开始了漫长而精细的创作过程。选用顶级的桑蚕丝作为原料，这种丝绸以其柔软光滑、透气轻盈的特性闻名于世，宛如肌肤的第二层温柔呵护。
              染色环节是整个制作过程的灵魂所在。工匠们采用古老而神秘的草木染技法，从各种天然植物中提取色彩。每一种植物都蕴含着独特的能量和色泽，将它们巧妙地搭配在一起，经过无数次的试验和调整，才终于调出与森林中那只蝴蝶翅膀最为接近的色彩。这些天然的色彩不仅赋予了丝巾鲜活的生命力，还带着淡淡的植物清香，仿佛将森林的气息永远地封存其中。
              而在织造工艺上，运用了现代先进的织机技术与传统手工技艺相结合的方式。织机精准地穿梭着丝线，每一个纹理都清晰而细腻，如同在丝绸上书写着精致的诗篇。而手工部分则由经验丰富的工匠们精心完成，他们用灵巧的双手对丝巾的边缘进行细致的处理，确保每一寸都完美无瑕。
              陪伴瞬间：见证人生的重要时刻
              这条丝巾一经问世，便成为了无数人生活中不可或缺的优雅点缀。它陪伴着职场女性在重要的商务会议上自信绽放，那一抹灵动的色彩为严肃的商务氛围增添了一份别样的柔情与魅力；在浪漫的婚礼上，它是新娘手中的美丽配饰，轻轻搭在手臂上，随着新娘的轻盈步伐飘动，见证着爱情的甜蜜与永恒；当人们踏上旅途，它又化作旅途中的温暖伴侣，在异国他乡的街头巷尾，随风飘扬，成为一道独特的风景线，记录着每一个难忘的瞬间。
              [丝巾名称]，它不仅仅是一条丝巾，更是一种对美好生活的向往，一份对自然与传统的致敬。每一次系上它，就仿佛开启了一场穿越时光的优雅之旅，让你在纷繁复杂的世界中，始终保持那份独有的从容与优雅。快来拥有这条充满故事的丝巾，让它成为你生活中最动人的一抹色彩吧。
            </div>
          </div>
        </div>
        <!-- 溯源信息 -->
        <div class="bg-gray-50 rounded-xl p-8 mb-12">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold">商品溯源信息</h2>
            <button
              class="text-indigo-600 button-border"
              @click="expandTrace = !expandTrace"
            >
              <i
                :class="[
                  'fas',
                  expandTrace ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                ]"
              ></i>
            </button>
          </div>

          <div v-show="expandTrace" class="grid grid-cols-3 gap-8">
            <div class="space-y-4">
              <h3 class="font-semibold text-lg mb-4">生产信息</h3>
              <div class="space-y-2">
                <p>生产地：江苏省苏州市</p>
                <p>生产日期：2025-01-15</p>
                <p>批次号：SZ20250115001</p>
              </div>
            </div>

            <div class="space-y-4">
              <h3 class="font-semibold text-lg mb-4">质检认证</h3>
              <div class="space-y-2">
                <p>质检机构：国家丝绸质量监督检验中心</p>
                <p>检验日期：2025-01-20</p>
                <p>证书编号：NSTC2025011586</p>
              </div>
            </div>

            <div class="space-y-4">
              <h3 class="font-semibold text-lg mb-4">区块链信息</h3>
              <div class="space-y-2">
                <p class="flex items-center">
                  合约地址：
                  <span class="text-sm text-gray-500 ml-2">0x7d5f...8e9f</span>
                  <i
                    class="fas fa-copy ml-2 cursor-pointer text-indigo-600"
                    @click="copyText('0x7d5f...8e9f')"
                  ></i>
                </p>
                <p>铸造时间：2025-02-01 14:30</p>
                <p>Token ID：#0086</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 交易记录 -->
        <div class="bg-white">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold">交易流转记录</h2>
            <div class="flex items-center space-x-4">
              <select
                v-model="sortType"
                class="border-none bg-gray-50 rounded-lg px-4 py-2"
              >
                <option value="time">按时间排序</option>
                <option value="price">按价格排序</option>
              </select>
            </div>
          </div>

          <div class="space-y-6">
            <div
              v-for="(record, index) in sortedRecords"
              :key="index"
              class="flex items-start space-x-4"
            >
              <div
                class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center"
              >
                <i class="fas fa-exchange-alt text-indigo-600"></i>
              </div>
              <div class="flex-1 bg-gray-50 rounded-lg p-4">
                <div class="flex items-center justify-between">
                  <span class="text-gray-500">{{ record.time }}</span>
                  <span class="font-semibold">￥{{ record.price }}</span>
                </div>
                <div class="mt-2 text-sm">
                  <p class="text-gray-600">
                    卖方：{{ record.seller }}
                    <i
                      class="fas fa-copy ml-2 cursor-pointer text-indigo-600"
                      @click="copyText(record.seller)"
                    ></i>
                  </p>
                  <p class="text-gray-600">
                    买方：{{ record.buyer }}
                    <i
                      class="fas fa-copy ml-2 cursor-pointer text-indigo-600"
                      @click="copyText(record.buyer)"
                    ></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 3D模型弹窗 -->
        <div
          v-if="show3DModel"
          class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
          @click.self="show3DModel = false"
        >
          <div class="bg-white rounded-xl p-8 max-w-4xl w-full">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-xl font-bold">数字孪生模型展示</h3>
              <button @click="show3DModel = false" class="button-border">
                <i class="el-icon-close"></i>
              </button>
            </div>
            <div
              class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center"
            >
              <!-- <img
                :src="'https://public.readdy.ai/ai/img_res/89604cce311f70970e2d54f8c1b1d65d.jpg'"
                class="w-full h-full object-cover rounded-lg"
                alt="在这里展示3D模型展示"
              /> -->
              
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 回到顶部按钮 -->
    <button
      v-show="showBackTop"
      @click="scrollToTop"
      class="!rounded-button fixed bottom-8 right-8 bg-purple-900 text-white w-12 h-12 flex items-center justify-center shadow-lg hover:bg-purple-800"
    >
      <i class="el-icon-top"></i>
    </button>
    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-16">
      <div class="max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-2xl font-serif mb-4">丝韵NFT</h3>
            <p class="text-gray-400">传承千年丝绸艺术，链接数字未来</p>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-twitter text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-instagram text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-discord text-xl"></i>
              </a>
            </div>
          </div>
          <div>
            <h4 class="font-medium mb-4">快速链接</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white">市场</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">艺术家</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">收藏品</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">社区</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-4">帮助中心</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white">新手指南</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">常见问题</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">用户协议</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">隐私政策</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-4">订阅更新</h4>
            <p class="text-gray-400 mb-4">获取最新艺术品和活动信息</p>
            <div class="flex">
              <input
                type="email"
                placeholder="输入邮箱地址"
                class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-full"
              />
              <button
                class="!rounded-button bg-purple-900 text-white px-4 py-2 rounded-r-lg hover:bg-purple-800"
              >
                订阅
              </button>
            </div>
          </div>
        </div>
        <div
          class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"
        >
          <p>&copy; 2025 丝韵NFT. 保留所有权利</p>
        </div>
      </div>
    </footer>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      searchQuery: "",
      show3DModel: false,
      expandTrace: true,
      showBackTop: false,
      sortType: "time",
      name: "ObjModelViewer",
      records: [
        {
          time: "2025-02-22 18:30",
          price: "28,888",
          seller: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
          buyer: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
        },
        {
          time: "2025-02-15 14:20",
          price: "25,000",
          seller: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
          buyer: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
        },
        {
          time: "2025-02-08 09:45",
          price: "22,000",
          seller: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
          buyer: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
        },
      ],
    };
  },
  computed: {
    sortedRecords() {
      return [...this.records].sort((a, b) => {
        if (this.sortType === "time") {
          return new Date(b.time) - new Date(a.time);
        }
        return (
          parseFloat(b.price.replace(",", "")) -
          parseFloat(a.price.replace(",", ""))
        );
      });
    },
  },
  mounted() {

  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    show3D() {
      this.show3DModel = true;
    },
    openProductDetail(product) {
      this.selectedProduct = product;
    },
    handleScroll() {
      this.showBackTop = window.pageYOffset > 300;
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleLogin() {
      // 这里添加登录逻辑，例如发送请求到后端验证
      this.showLoginModal = false;
    },
    handleCheckout() {
      // 这里添加结算逻辑，例如计算总价、提交订单等
      this.showCart = false;
    },
    removeFromCart(index) {
      this.cartItems.splice(index, 1);
      // 重新计算购物车数量和总价
      this.cartCount = this.cartItems.length;
      this.cartTotal = this.cartItems.reduce(
        (acc, item) => acc + parseFloat(item.price),
        0
      );
    },
    goToTracePage() {
      this.$router.push('/blockTrace/index');
    },
  },
};
</script>
  
  <style scoped>
@import "../..//assets/tailwind.css";
.custom-login-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg;
}
.custom-login-input:focus {
  @apply outline-none ring-2 ring-purple-500 border-transparent;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* 移除number输入框的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.button-border {
  border: none;
  background: transparent;
}
</style>